<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/5/13
  Time: 10:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/font-awesome.css"/>
    <link rel="stylesheet" href="css/notifications/Lobibox.min.css">
    <script src="js/vendor/jquery-1.12.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/notifications/Lobibox.js"></script>
    <script src="js/jquery.cookie.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #eeeeee;
        }

        .navbar-text a {
            color: #ffffff;
        }

        .login-text {
            margin-right: 50px;
        }

        .logo {
            color: #E94F4C;
            font-size: 35px;
            display: inline-block;
        }

        .search-box {
            height: 48px;
        }

        .input-group-addon {
            background-color: #E94F4C;
            border: none;
            color: #ffffff;
        }

        .control-icon {
            position: absolute;
            top: 50%;
        }

        .mgt38 {
            margin-top: 30px;
        }

        .thumbnail a img {
            height: 200px;
            width: 200px;
        }

        .thumbnail .description {
            height: 40px;
            overflow: hidden;
        }

        a:hover {
            text-decoration: none;
        }

        h3, p {
            text-align: center;
        }
    </style>
    <script>
        function usename() {
            var wordReg = /^[a-zA-Z]+/;  //必须以字母开头
            var specialReg = /[`~!@#$^&*()=|{}':;',\[\].<>?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]/;  //特殊字符验证
            var username = document.getElementById("username").value;
            var username_span = document.getElementById("username_span");
            if (wordReg.test(username) || specialReg.test(username)) {
                // username_span.innerHTML="<img src='../img/11.jpg' width='50' height='35'/>";
                return true;
            } else {
                username_span.innerHTML = "输入错误";
                return false;
            }

        }

        function pasword() {
            var reg = /^\w{3,12}/;
            var password = document.getElementById("password").value;
            var password_span = document.getElementById("password_span");
            if (reg.test(password)) {
                // password_span.innerHTML="<img src='../img/11.jpg' width='50' height='35'/>";
                return true;
            } else {
                password_span.innerHTML = "输入错误";
                return false;
            }

        }
    </script>
</head>
<body>
<nav class="navbar navbar-default navbar-inverse navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="index.jsp" class="navbar-brand" style="color: #ffffff;"><i class="fa fa-sign-language"></i>
                寻欢易购</a>
        </div>
        <p class="navbar-text navbar-right login-text">
            <a href="login.jsp">登录</a>
        </p>
        <p class="navbar-text navbar-right">
            <a href="register.jsp">注册</a>
        </p>
    </div>
</nav>
<div class="container">
    <div class="row">
        <div class="col-xs-6 col-xs-push-3">
            <div class="panel panel-danger login-panel">
                <div class="panel-heading">
                    <!-- 面板的头部内容 -->
                    <h3 class="panel-title">用户登录</h3>
                </div>
                <div class="panel-body">
                    <form onsubmit="javascript: return false;">
<%--                    <form id="login_form">--%>
                        <div class="form-group">
                            <label for="username">用户名</label>
                            <input type="text" class="form-control" autocomplete="off" id="username" name="username"
                                   placeholder="请输入用户名" onblur="usename()">
                            <span id="username_span" class="error"></span>
                        </div>
                        <div class="form-group">
                            <label for="password">密码</label>
                            <input type="password" class="form-control" autocomplete="off" id="password" name="password"
                                   placeholder="请输入密码" onblur="pasword()">
                            <span id="password_span" class="error"></span>
                        </div>
                        <div class="form-group">
                            <input class="btn btn-danger btn-block" type="submit" value="登录" id="sb_submit" onclick="userLogin()"><br/>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
</div>
</body>
<script>
    //登录成功合并本地购物车数据 以及 该用户数据库购物车的数据
    if (sessionStorage.getItem("userId") != null){
        console.log("登录状态")
    } else {
        console.log("未登录状态")
    }

    function userLogin() {
        var username = $("#username").val();
        var password = $("#password").val();

        $.ajax({
            url: '${pageContext.request.contextPath}/front/login',
            type: 'post',
            dataType: 'json',
            data: {
                username: username,
                password: password
            },
            success: function (data) {
                console.log(data)
                if (data.code >0) {  //登录成功
                    // if (data.code >0){  //登录成功

                    //把用户名密码存储在session里面，首页显示用户名称
                    localStorage.setItem("username",username);
                    sessionStorage.setItem("userId", data.id);

                    $.cookie("uId",data.id);
                    $.cookie("username",username);

                    if(document.referrer) {  //表示有上次的访问页面
                        window.location.href = document.referrer;
                    }else { // 没有上次访问的页面, 说白了就是直接过来的
                        window.location.href = 'index.jsp';
                    }
                    // window.location.href = 'index.jsp';

                    // sessionStorage.setItem("userId", data.msg);
                    // sessionStorage.getItem("userId");


                    //如果登录成功本地购物车有数据，将本地购物车数据与数据库购物车合并，并加入数据库
                    // var goodsCart = localStorage.getItem("local_goods_cart");
                    // sysnGoodsCart(goodsCart); }
                }
            },
            error: function () {
                alert(888888888)
            }
        });
    }

    //同步购物车
    function sysnGoodsCart(goodsCart) {
        $.ajax({
            url: "cartServlet",
            type: "post",
            data: {
                method: "syncGoodsCart",
                cartData: goodsCart
            },
            dataType: "json",
            //  data含有合并购物车的集合， 合并后要将localStorage更新
            success: function (data) {
                if (data.code > 0){
                    localStorage.setItem("local_goods_cart",JSON.stringify(data.map));
                }

                // 跳转到上一次的页面
                if(document.referrer) {  //表示有上次的访问页面
                    window.location.href = document.referrer;
                }else { // 没有上次访问的页面, 说白了就是直接过来的
                    window.location.href = 'index.jsp';
                }
            }
        });
    }

    // 显示错误提示信息
    function showErrorBox(msgText) {
        Lobibox.notify('warning', {
            size: 'mini',
            delay: 2000,
            delayIndicator: false,
            title: false, //不给title
            msg: msgText,
            sound: false  // 不要音频
        })
    };
</script>
</html>
